// 因为js文件是在html文档顶部引入，因此需要添加页面加载事件
window.addEventListener('load', function () {
  // 业务1： 页面滚动，可以显示顶部导航栏
  // 顶部导航
  let productnav = document.querySelector('.productnav')
  // 可以先提前得到 navHeight 顶部导航的高度, 因为滑动之后，顶部导航会少了图片，盒子变小了，就不准了
  let navHeight = productnav.offsetHeight

  //1.获取元素
  let productnav_items = this.document.querySelector('.productnav-items')
  let productnav_item = document.querySelectorAll('.productnav-items .productnav-item')
  let bigs = document.querySelectorAll('.series-banner-items .js-scroll-magic')
  let lines = document.querySelector('.line')
  let plp_series_banner = document.querySelector('.plp-series-banner')
  //左侧列表
  //左侧列表

  // 顶部导航页面滑动大于80像素时候，会改为固定定位
  window.addEventListener('scroll', function () {
    let scrolls = document.documentElement.scrollTop
    if (scrolls >= navHeight) {
      productnav.classList.add('fixed')
      // 注意，顶部导航变为固定定位不占位置了，所以，下面main盒子会直接跳上去，所以要给main margin-top 
      document.querySelector('.main').style.marginTop = navHeight + 'px'

    } else {
      productnav.classList.remove('fixed')
      // 复原之后，顶部盒子不是固定定位了，所以 main盒子不需要margin-top了
      document.querySelector('.main').style.marginTop = 0 + 'px'
    }

    for (let i = 0; i < bigs.length; i++) {
      if (scrolls > bigs[i].offsetTop - plp_series_banner.offsetTop + navHeight) {
        if (bigs[i] == 0) {
          lines.style.transform = `translateX(0px)`
        } else if (bigs[i] == bigs.length) {
          lines.style.transform = `translateX(${productnav_item[4].offsetLeft}px)`
        } else {
          lines.style.width = productnav_item[i].offsetWidth + 'px'
          lines.style.transform = `translateX(${productnav_item[i].offsetLeft}px)`
        }
      }
    }
  })

  // 业务2： 点击顶部导航，页面可以滑动

  // 因为黑色的底部条条可以滑动，所以先设置这个条条的宽度 和起始位置
  // console.log(productnav_items);
  //2.点击每一个list模块， 页面可以滚动到对应位置，并且 底部 line 滑动
  // productnav_items.addEventListener('click', function (e) {
  //   if (e.target.tagName === 'LI') {
  //     lines.style.width = e.target.offsetWidth + 'px'
  //     lines.style.transform = `translateX(${e.target.offsetLeft}px)`
  //   }

  //   let index = e.target.dataset.index
  //   document.documentElement.scrollTop = bigs[index].offsetTop + navHeight
  // })

  for (let i = 0; i < productnav_item.length; i++) {
    productnav_item[i].addEventListener('click', function (e) {
      lines.style.width = this.offsetWidth + 'px'
      lines.style.transform = `translateX(${this.offsetLeft}px)`
      document.documentElement.scrollTop = bigs[i].offsetTop + navHeight
    })

  }

  //  页面滚动到下标一致盒子的位置

  // 让 line盒子滑动到对应位置

  // 因为每个item盒子宽度不一样，所以需要修改宽度

  // 业务3 页面滚动到对应大盒子位置，底部的line线条跟随滑动

  // 让 line盒子滑动到对应位置

  // 因为每个item盒子宽度不一样，所以需要修改宽度



})

